<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__HUI__/layui-v2.2.45/layui/css/layui.css">
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }

        .box{
            position: absolute;
            top: 30%;
            width: 500px;
            left: 60%;
            height: 400px;
            background: rgba(0,0,0,.1);
        }

        .box > h3{
            width: 500px;
            margin: 0px auto;
            text-align: center;
            border-bottom: 1px solid #aaa;
            padding-bottom: 30px;
            font-size: 24px;
            color: #696969;
        }

        .login-box{
            width: 480px;
            position: absolute;
            height: 380px;
            font-size: 12px;
            top: 10px;
            left: 10px;
            background: white;
        }

        .user-name, .password{
            position: absolute;
            height: 87px;
        }

        .user-name{
            top: 90px;
        }

        .password{
            top: 170px;
        }

        .user-name input, .password input{
            position: absolute;
            left: 114px;
            top: 10px;
            width: 300px;
            height: 48px;
            border: 1px solid #E5E5E5;
            letter-spacing:3px;
            padding-left: 10px;
        }

        .user-name label, .password label{
            position: absolute;
            right: 310px;
            top: 14px;
        }

        .user-name img, .password img{
            position: absolute;
            width: 50px;
            top: 10px;
            left: 64px;
        }

        .back-bg{
            background-size:100%;
            background-attachment: fixed;
            background-position:center;
        }

        #submit{
            position: absolute;
            border: 0px;
            background: #249AE2;
            color: white;
            left: 45px;
            width: 416px;
            height: 60px;
            font-size: 20px;
            bottom: 40px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body background="__HUI__/images/login-bg.png" class="back-bg">
    <div class="box">
        <p style="position: absolute;top: -80px;width: 100%;text-align: center;font-size: 25px;color: white;font-weight: bold;">VMS视频综合管理平台</p>
        <div>
            <div class="login-box">
                <p style="position: absolute;top: 20px;font-size: 20px;text-align: center;width: 100%;">用户登录</p>
                <div class="user-name">
                    <img src="__HUI__/images/123.png" alt="">
                    <input  type="text" name="username" placeholder="请输入用户名"/>
                </div>
                <div class="password">
                    <img src="__HUI__/images/456.png" alt="">
                    <input type="password" name="password" placeholder="请输入密码"/>
                </div>
            </div>
            <!-- <input type="checkbox" style="position: fixed; top: 570px; left: 1128px; width: 20px;height: 20px;"> -->
            <input type="submit" id="submit" value="立即登录" style=""/>
        </div>
    </div>
</body>
<script type="text/javascript" src="__HUI__/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__HUI__/layui-v2.2.45/layui/layui.all.js"></script>
<script>
    $(function(){
        $('body').bind('keyup', function(event) {
            if (event.keyCode == "13") {
                //回车执行查询
                $("#submit").click();
            }
        });

        $("#submit").click(function(){
            var userName;
            var password;
            if ($(".user-name input").val()) {
                userName = $(".user-name input").val();
            } else{
                layer.msg('用户名不能为空', {
                    icon: 2,
                    time: 2000
                });
                return;
            }

            if ($(".password input").val()) {
                password = $(".password input").val();
            } else{
                layer.msg('密码不能为空', {
                    icon: 2,
                    time: 2000
                });
                return;
            }

            $.ajax({
                type : "post",
                url: "{:U('Home/Login/login_post')}",
                data:{
                    userName : userName,
                    password : password
                },
                dataType: "json",
                success : function(res){
                    if(res === 0){
                        window.location.href="{:U('Home/Index/index')}";
                    }else if(res == 10005){
                        layer.msg('用户名错误', {
                            icon: 2,
                            time: 2000
                        });
                    }else if(res == 10006){
                        layer.msg('密码错误', {
                            icon: 2,
                            time: 2000
                        });
                    }
                }
            })
        })
    });
</script>
</html>